<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">切换账号</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--切换账号start-->
		<view class="improve change_account">
			<view class="intro">手指向左滑动，用以清除账户保存记录</view>
			<u-swipe-action>
				<u-swipe-action-item :options="options1"  v-for='(item,index) in arr' :key='index'>
					<view class="user" @tap="check_user(index)">
						<u-avatar shape="circle" size="63rpx" :src="item.url" default-url="/static/images/img_50.png"></u-avatar>
						<view class="tit">{{item.name}}<view>{{item.phone}}</view></view>
						<view class='default' v-if='isShow== item.default'><image src='/static/images/img_45.png'></image></view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<view class="btn">
				<image src="/static/images/img_68.png" class="img"></image>
				<view @click='popup_show()'>添加会员账号</view>
			</view>
			
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!--切换账号end-->
		
		<!--弹窗start-->
		<u-popup  mode="bottom" :show="gj_box" :closeOnClickOverlay="true" @close="popup_close">
			<view class="add_account_box">
				<image src="/static/images/img_31.png" class="close" @click="popup_close()"></image>
				<view class="lt_input">
					<u-input type="number" placeholder="输入ID/手机" placeholderStyle="color: #8B8B8C" v-model="cusname"  /></u-input>
					<image src="/static/images/img_07.png" mode="widthFix" v-if="cusname.length>0" class="tel_close"  @click="cusname=''"></image>
				</view>
				<view class="lt_input">
					<u-input type="text" :password="showPassword"  value="" placeholder="输入密码" placeholderStyle="color: #8B8B8C"></u-input>
					<view class="eye" :class="[showPassword==true?'':'on']" @click="ShowPwd"></view>
				</view>
				<button class="submit change_btn on" @tap="save_account">保存账号</button>
			</view>
		</u-popup>
		<!--弹窗end-->
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			arr:[
				{name:'朱元璋',phone:'138*****899',url:'/static/images/img_50.png',default:0},
				{name:'赵本山',phone:'138*****899',url:'/static/images/g_img24.png',default:1},
				{name:'张三',phone:'138*****899',url:'/static/images/g_img25.png',default:2},
				],
			gj_box:false,
			showPassword: true,
			cusname:"",
			options1: [{
				text: '清除',
				style: {
					backgroundColor: '#e56368',
					width:'130rpx',
					fontSize:'28rpx'
				}
			}],
			isShow:0
		}
	},
	onLoad(){
	},
	methods: {
		ShowPwd(){
			this.showPassword = !this.showPassword
		},
		popup_close(){
			this.gj_box = false
		},
		popup_show(){
			this.gj_box = true
			console.log(111)
		},
		save_account(){
			this.gj_box = false
		},
		check_user(i){
			this.isShow = i
		}
	},
	computed: {
		
	},
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("transaction.scss");
 .u-swipe-action-item{
	margin-bottom: 23rpx;
	border-radius: 20rpx;
	height: 128rpx;
}
.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			 padding: 25rpx 0;
	
			&__text {
				 font-size: 15px;
				 color: #e56368;
				 padding-left: 30rpx;
			 }
		}
}	
</style>